import React from 'react'
import { Tabs, Form, Input, Button, Toast } from 'antd-mobile'
import http from '../../api/http'
import { useNavigate } from 'react-router-dom'

const Login = () => {
    const nav = useNavigate()
    const [form] = Form.useForm()
    const onFinish = async (values) => {
        const res = await http.post("/xx/login", values)
        const { data, code, message } = res.data
        if (code === 10000) {
            localStorage.setItem("token", data.token)
            Toast.show({
                icon: 'success',
                content: '登录成功',
            })
            nav("/")
        } else {
            Toast.show({
                icon: 'fail',
                content: '登录失败',
            })
        }
    }

    const getCode=async()=>{
      form.validateFields(["tel"]).then({tel})
       const res=await http.get("/api/login/code",{params:{tel}})
       console.log(res.data);
      }
    return (
        <div>
            <Tabs>
                <Tabs.Tab title='账号登录' key='fruits'>
                    <Form
                        onFinish={onFinish}
                        layout='horizontal'
                        footer={
                            <Button block type='submit' color='primary' size='large'>
                                登录
                            </Button>
                        }
                    >
                        <Form.Header>账号登录</Form.Header>
                        <Form.Item
                            name='username'
                            label='账号'
                            rules={[{ required: true, message: '账号不能为空' }]}
                        >
                            <Input placeholder='请输入账号' />
                        </Form.Item>
                        <Form.Item
                            name='password'
                            label='密码'
                            rules={[{ required: true, message: '密码不能为空' }]}
                        >
                            <Input placeholder='请输入密码' />
                        </Form.Item>
                    </Form>
                </Tabs.Tab>
                <Tabs.Tab title='短信登录' key='vegetables'>
                    <Form
                         form={form}
                        onFinish={onFinish}
                        layout='horizontal'
                        footer={
                            <Button block type='submit' color='primary' size='large'>
                                登录
                            </Button>
                        }
                    >
                        <Form.Header>短信登录</Form.Header>
                        <Form.Item
                            name='tel'
                            label='手机号'
                            rules={[{ required: true, message: '手机号不能为空' }]}
                        >
                            <Input placeholder='请输入手机号' />
                        </Form.Item>
                        <Form.Item 
                        name='telCode'
                        label='短信验证码' 
                        extra={<Button onClick={()=>getCode()}>发送验证码</Button>}>
                            <Input placeholder='请输入验证码' />
                        </Form.Item>
                    </Form>
                </Tabs.Tab>
            </Tabs>
        </div>
    )
}

export default Login
